<template>
  <div class="meetingHome">
    <el-row :gutter="30">
      <el-col :span="6">
        <el-card>
          <div class="meetingHome-item">
            <svg-icon icon-class="person" class="meetingHome-item__icon" />
            <div class="meetingHome-item__title">报名人数</div>
          </div>
          <div class="meetingHome-number">{{meetingDetail.registeredNumber || 0}}人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="meetingHome-item">
            <svg-icon icon-class="person" class="meetingHome-item__icon2" />
            <div class="meetingHome-item__title">已签到人数</div>
          </div>
          <div class="meetingHome-number">{{meetingDetail.signedNumber || 0}}人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="meetingHome-item">
            <svg-icon icon-class="person" class="meetingHome-item__icon3" />
            <div class="meetingHome-item__title">未签到人数</div>
          </div>
          <div class="meetingHome-number">{{meetingDetail.unsignedNumber || 0}}人</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="meetingHome-item">
            <svg-icon icon-class="view" class="meetingHome-item__icon4" />
            <div class="meetingHome-item__title">总访问量</div>
          </div>
          <div class="meetingHome-number">{{meetingDetail.totalView || 0}}人</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="meetingHome-chart">
      <el-card>
        <div class="meetingHome-chart__switch">
          <div :class="['el-button', 'el-button--medium', 'is-round', { 'el-button--primary': activeTab === 1 }]" @click="handleClick(1)">全部</div>
<!--          <div :class="['el-button', 'el-button&#45;&#45;medium', 'is-round', { 'el-button&#45;&#45;primary': activeTab === 2 }]" @click="handleClick(2)">访问人数</div>-->
        </div>
        <div id="main" style="width: 100%; height: 400px;" v-show="activeTab === 1"></div>
        <div id="main2" style="width: 100%; height: 400px;" v-show="activeTab === 2"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getMeetReport} from "@/api/meetingManagement/meet";
export default {
  name: 'index',
  data() {
    return {
      activeTab: 1,
      meetId: null,
      meetingDetail: {
        registeredNumber: 0,
        signedNumber: 0,
        unsignedNumber: 0,
        totalView: 0
      }
    }
  },
  mounted() {
    this.meetId = this.$route.params && this.$route.params.id
    this.getDetail()
  },
  methods: {
    getDetail() {
      getMeetReport(this.meetId).then(response => {
        this.meetingDetail.registeredNumber = response?.data?.registeredNumber || 0
        this.meetingDetail.signedNumber = response?.data?.signedNumber || 0
        this.meetingDetail.unsignedNumber = response?.data?.unsignedNumber || 0
        this.meetingDetail.totalView = this.meetingDetail?.registeredNumber + this.meetingDetail?.signedNumber + this.meetingDetail?.unsignedNumber
        this.initChart();
      })
    },
    handleClick(tab){
      this.activeTab = tab
      if (tab === 2) {
        this.$nextTick(() => {
          this.initChart2();
        });
      }
    },
    initChart(){
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['报名人数', '签到人数', '未签到人数', '总访问量']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [this.meetingDetail?.registeredNumber, this.meetingDetail?.signedNumber, this.meetingDetail?.unsignedNumber, this.meetingDetail?.totalView],
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initChart2(){
      let chartDom = document.getElementById('main2');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['移动互联网', 'pc访问']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04', '2024-01-05', '2024-01-06', '2024-01-07']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '移动互联网',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'pc访问',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      };
      option && myChart.setOption(option);
    },
  }
}
</script>
<style scoped lang="scss">
.meetingHome {
  padding: 20px 10px;
  width: 100%;
  height: 100%;
  &-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #76838f;
    &__icon {
      font-size: 30px;
      margin-right: 18px;
      color: #28c0de;
    }
    &__icon2 {
      font-size: 30px;
      margin-right: 18px;
      color: #28d17c;
    }
    &__icon3 {
      font-size: 30px;
      margin-right: 18px;
      color: #ff666b;
    }
    &__icon4 {
      font-size: 30px;
      margin-right: 18px;
      color: #3e8ef7;
    }
    &__title {
      font-size: 16px;
    }
  }
  &-number {
    width: 100%;
    font-size: 30px;
    text-align: center;
    color: #76838f;
  }
  &-chart {
    width: 100%;
    height: calc(100% - 300px);
    margin-top: 20px;
    &__switch {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: right;
      margin-top: 16px;
      margin-bottom: 20px;
    }
  }
}
</style>
